<template>
  <div>
    <van-nav-bar>
      <template #title>
        <span style="font-size:18px">约课记录</span>
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" color="red" title-active-color="red">
      <van-tab title="待上课" class="tabs">
        <div class="tabs-item">
          <img src="@/assets/yk.png" width="65%">
          <p>请登录后查看相关内容</p>
          <van-button type="primary" size="small" @click="goCoach">登录/注册</van-button>
        </div>
      </van-tab>
      <van-tab title="已上课" class="tabs">
        <div class="tabs-item">
          <img src="@/assets/yk.png" width="65%">
          <p>请登录后查看相关内容</p>
          <van-button type="primary" size="small" @click="goCoach">登录/注册</van-button>
        </div>
      </van-tab>
      <van-tab title="已取消" class="tabs">
        <div class="tabs-item">
          <img src="@/assets/yk.png" width="65%">
          <p>请登录后查看相关内容</p>
          <van-button type="primary" size="small" @click="goCoach">登录/注册</van-button>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      active:0
    };
  },
  mounted() {},
  methods: {
    goCoach(){
      this.$router.push({path:"/coach"})
    }
  },
  computed: {},
  watch: {},
  created() {},
};
</script>

<style scoped>
.tabs{
  width: 100%;
  height: 79vh;
  background-color: #F0F2F5;
  text-align: center;
  position: relative;
}
.tabs-item{
  width: 60%;
  position: absolute;
  top: 100PX;
  left: 50%;
  transform: translateX(-50%);
}
.tabs-item img{
  width: 180px;
}
.tabs-item p{
  color: #B7B7B7;
  font-size: 14px;
  margin-bottom: 25px;
}
.van-button{
  width: 90px;
  background-color: #EB6100;
  border: 0;
  font-size: 14px;
}
</style>
